<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PearPlayer</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src = "./jquery/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href = "./layout/layout.css">
    <link href = "bootstrap-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href = "bootstrap-dist/dist/sweetalert.css">
    <link rel="stylesheet" href = "./layout/login.css">
    <link rel="stylesheet" href = "./layout/video.css">
    <link rel="stylesheet" href = "./plugins/vis-network.min.css">
  </head>
  <body>
    <div id="root">
      <div id="header">
      <nav class="navbar navbar-default">
        <div class="container-fluid nav-header-color  ">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse nav-nav-btn" id="bs-example-navbar-collapse-1" style="margin-left: 390px">
          <ul class="nav navbar-nav">
            <li class="nav-image-logo nav-nav-btn">
              <img alt="pearlogo" src="./images/pearlogo.png">
            </li>
            <!--<li><a href="#">Links</a></li>-->
            <!--<li><a href="#">Links</a></li>-->
            <!--<li><a href="#">Links</a></li>-->
            <!--<li><a href="#">Links</a></li>-->
            <!--<li><a href="#">Links</a></li>-->
            <!--<li><a href="#">Links</a></li>-->
            <!--<li><a href="#">Links</a></li>-->
          </ul>
        </div>
      </div>
      </nav>
      </div>
      <div id="content">
      <div id="content-main">
        <div id="content-header">
          <p>Live Fog Streaming CDN Demo</p>
        </div>
        <div id="content-body">
          <div class="video">
            <video  id="pearvideo"  controls="controls" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4">
            </video>
          </div>
          <div class="selector">
            <div class="input-group selector-bootstrap-btn">
              <span class="input-group-addon source-header-setcolor">✓ WebRTC </span>
              <input type="text" class="form-control" id="set-newsource" placeholder="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" aria-describedby="basic-addon2" value="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4">
              <span class="input-group-addon set-player-start-button" id="basic-addon2">播放</span>
            </div>
          </div>
          <div class="speed-area">
            <div class="speed-show">
              <div class="downSpeed-show">
                <div class="p2p-speed-show" style="color: rgb(0, 255, 0);">
                  Fog Speed <span class="p2p-speed-number"></span>
                  </div>
                <div class="http-speed-show" style="color: rgb(255, 0, 0);">
                  Cloud Speed <span class="http-speed-number"></span>
                </div>
              </div>
              <canvas id="mycanvas" width="600" height="312"></canvas>
            </div>
            <div class="speed-item">
                <div class="speed-item-show">
                  <div class="speed-item-show-precent">
                    0%
                  </div>
                  <div class="speed-item-show-unit">
                    (0 M)
                  </div>
                  <div class="speed-item-show-text">
                    Fog Ratio
                  </div>
                </div>
                <div class="speed-item-selector">
                  <!-- <span type="button" name="button">
                    <select name="select" id = 'setParent' onchange="setInputValue()" title="">
                          <option value="">请选设置项</option>
                          <option value="1">chunkSize</option>
                          <option value="5">interval</option>
                          <option value="6">timeout</option>
                          <option value="7">reconnectTimes</option>
                          <option value="8">slideInterval</option>
                    </select>
                    <input id = 'setChild' type="text" name="" value="">
                </span>
                <span type="button" name="button">
                  <select name="select" id = 'Firstaid-setParent' onchange="setFirstaidSetarr()" title="">
                        <option value="">Firstaid算法设置</option>
                        <option value="1">urgent</option>
                        <option value="2">normal</option>
                        <option value="3">prefetch</option>
                  </select>
                  <input id = 'Firstaid-setChild' type="text" name="" value="">
              </span>
                  <span type="button" name="button">
                    <select id="parent" onchange='clickOpt()' title="">
                        <option value="">请选设置项</option>
                        <option value="1">auto</option>
                        <option value="2">useDataChannel</option>
                    </select>
                    <select id="child">

                    </select>
                  </span> -->
                  <table border="1">
                    <tr>
                        <th title="核心算法,默认firstaid">Algorithm</th>
                        <td>FirstAid</td>
                    </tr>
                    <tr>
                        <th title="每个chunk的大小,必须是32K的整数倍,默认1M">ChunkSize</th>
                        <td>1 M</td>
                    </tr>
                    <tr>
                        <th title="滑动窗口的时间间隔,单位毫秒,默认10s">Interval</th>
                        <td>5000 ms</td>
                    </tr>
                      <tr>
                            <th title="当前播放时间与已缓冲时间小于这个数值时触发窗口滑动,单位秒,默认10s">SlideInterval</th>
                            <td>20 s</td>
                        </tr>
                </table>
                    </div>
              </div>
            </div>
          </div>
        </div>
        <div id="content-footer">

          <div class="dropdown defalutStyleplay">
            <button class="btn btn-default obrDropdown" type="button">
            详细信息
              <span class="caret"></span>
            </button>
          <div class="setDownTypeArea setDownTypeAreaShow">
            <div class="progressColorSet">
                <div class="setDownType defualtColor" id = "defualtDownColor">

                </div>
                <label for="defualtDownColor" class="labelDownColor" style="display:inline-block">Undownloaded</label>
              <div class="setDownType serverColor" id = "defualtserverColor">

              </div>
              <label for="defualtserverColor" class="labelServer">Cloud Server(s)</label>
              <div class="setDownType nodeColor" id = "defaultnodeColor">

              </div>
              <label for="defaultnodeColor" class = "labelNodeColor">Fog Node(s) HTTP</label>
              <div class="setDownType dataChannelColor" id = "defaultdataChannelColor">

              </div>
              <label for="defaultdataChannelColor" class="labelChannelColor">Fog Node(s) WebRTC</label>
              <div class="setDownType browserColor" id = "defaultbrowserColor">

              </div>
              <label for="defaultbrowserColor" class="labelBrowser">Fog Node(s) Browser</label>
              <!-- <div class="setDownType" id = "">
                4
              </div>
              <label for="defualtDownColor" class=" ">default</label> -->
            </div>
          </div>
          </div>


          <div class="downDataProgress defaultdownDataProgress">

          </div>
        </div>
      </div>
      </div>

    <div class="downloadBlock">
      <h3>流量统计</h3>
      <div class="downloadHeader">
        <table>
          <thead>
          <tr>
            <td>Type</td>
            <td>UUID</td>
            <td>Downloaded</td>
          </tr>
          </thead>
        </table>
      </div>
      <div class="downloadInfo">
        <table class="downloadTable">
          <tbody></tbody>
        </table>
      </div>
    </div>

      <div id="footer">
        <div id="footer-content">

        </div>
      </div>
    </div>
    <div style="height: 400px">
      <div style="width: 400px; float: left">
        <h3>此浏览器支持的H5特性：</h3>
        <ul>
          <li id="c-video">HTMLVideoElement</li>
          <li id="c-h264">H.264</li>
          <li id="c-webm">WebM VP8</li>
        </ul>

        <ul>
          <li id="c-mse">Media Source Extensions</li>
          <li id="c-mse-h264">MSE &amp; H.264</li>
          <li id="c-mse-webm">MSE &amp; WebM VP9</li>
        </ul>

        <ul>
          <li id="c-websocket">WebSocket</li>
        </ul>

        <ul>
          <li id="c-webrtc-getUserMedia">WebRTC:getUserMedia</li>
          <li id="c-webrtc-webkitRTCPeerConnection">WebRTC:webkitRTCPeerConnection</li>
          <li id="c-webrtc-RTCIceCandidate">WebRTC:RTCIceCandidate</li>
          <li id="c-webrtc-RTCSessionDescription">WebRTC:RTCSessionDescription</li>
        </ul>
        <p id="browserInfo"></p>
        <p id="ispInfo"></p>
      </div>



      <div id="monitor" style="width: 400px; float: right">
        <h3>调试信息</h3>
        <p id="monitor-progress"></p>
        <p id="monitor-bitrate"></p>
        <p id="monitor-signaler"></p>
        <p id="monitor-http"></p>
        <p id="monitor-datachannel"></p>
        <p id="monitor-window"></p>
      </div>

        <div id="mynetwork" style="margin: 0 430px; height: 100%"></div>
    </div>

    <!--<script src = "./plugins/pear-player.min.js"></script>-->
    <script src = "./plugins/pear-player.min.js"></script>
    <script src = "./plugins/bowser.min.js"></script>
    <script src = "./plugins/smoothie.js"></script>
    <script src = "./plugins/vis-network.min.js"></script>
    <script src = "./js-pear/login.js"></script>
    <script src = "./js-pear/peardata.js"></script>
    <script src = "./js-pear/userCanvas.js"></script>
    <script src = "./js-pear/pearJavascript.js"></script>
    <script src = "bootstrap-dist/js/bootstrap.min.js"></script>
    <script src = "bootstrap-dist/dist/sweetalert.min.js"></script>
    <script>
//        alert('Hello ' + bowser.name + ' ' + bowser.version);
        var browserInfo = document.getElementById("browserInfo");
        browserInfo.innerHTML = ' 当前浏览器: ' + bowser.name + '  版本: ' + bowser.version;
        function checkFormats() {
            var videoElement = document.createElement('video');

            var setCompatibility = function(id, isCompatible) {
                var el = document.getElementById(id);
                el.className = isCompatible ? 'yes' : 'no';

                var st = document.createElement('span');
                st.innerText = ': ' + (isCompatible ? 'YES' : 'NO');
                el.appendChild(st);
            };

            var videoCompatible = videoElement && videoElement.canPlayType;
            setCompatibility('c-video', videoCompatible);

            var join = document.getElementById('html5-join-link');

            setCompatibility('c-websocket', window.WebSocket);

            setCompatibility('c-h264',
                videoElement && videoElement.canPlayType &&
                videoElement.canPlayType('video/mp4; codecs="avc1.42001E, mp4a.40.2"'));

            setCompatibility('c-webm',
                videoElement && videoElement.canPlayType &&
                videoElement.canPlayType('video/webm; codecs="vp8.0, vorbis"'));

            var mse = window['MediaSource'] || window['WebKitMediaSource'];
            setCompatibility('c-mse', !!mse);
            var checkMSECompatibility = function(mimeType) {
                if (mse && !mse.isTypeSupported) {
                    // When async type detection is required, fall back to canPlayType.
                    return videoElement.canPlayType(mimeType);
                } else {
                    return mse && mse.isTypeSupported(mimeType);
                }
            };

            setCompatibility('c-mse-h264',
                checkMSECompatibility('video/mp4; codecs="avc1.4d401e"'));
            setCompatibility('c-mse-webm',
                checkMSECompatibility('video/webm; codecs="vp9"'));

            setCompatibility('c-webrtc-getUserMedia', navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
            setCompatibility('c-webrtc-webkitRTCPeerConnection', window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
            setCompatibility('c-webrtc-RTCIceCandidate', window.RTCIceCandidate);
            setCompatibility('c-webrtc-RTCSessionDescription', window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription);

        }
        checkFormats();
    </script>
    <script type="text/javascript">

//        function get_ip(cb) {
//            var script = document.createElement("script"),
//                s  = document.getElementsByTagName("script")[0];
//
//            script.src = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=jsonp";
//            s.parentNode.insertBefore(script, s);
//
//            var it = setInterval(function () {
//                if (!!remote_ip_info) {
//                    cb(remote_ip_info);
//                    remote_ip_info = null;
//
//                    clearInterval(it);
//                    it = null;
//                }
//            }, 100);
//        }
//
//        get_ip(function (info) {
//            var browserInfo = document.getElementById("ispInfo");
//            browserInfo.innerHTML = 'ip所在地为:' + info.country + info.province + info.city
////                +'<br>'
////                +'运营商：'+location.traits.isp
////                +'<br>'
////                +'公网IP：'+location.traits.ip_address;
//        });

    </script>
  </body>
</html>
